<!--
 * @Author: JiraiyaChen 979526234@qq.com
 * @Date: 2025-03-07 11:07:10
 * @LastEditors: JiraiyaChen 979526234@qq.com
 * @LastEditTime: 2025-03-13 15:41:44
 * @Description: 弹框
-->

<template>
  <el-dialog
    v-bind="$attrs"
    append-to-body
    :close-on-click-modal="false"
    :align-center="true"
    destroy-on-close
    :close-icon="CloseBold"
    trap-focus
  >
    <template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
      <slot :name="name" v-bind="slotData" />
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { CloseBold } from '@element-plus/icons-vue'
</script>

<style lang="scss">
.el-dialog {
  border-radius: 16px;
}
.el-dialog__close {
  font-size: 20px !important;
}
.el-dialog__footer {
  text-align: center;
}
.el-dialog__headerbtn {
  top: 30px;
  right: 30px;
}
.el-dialog__header {
  padding: 40px 50px 20px 50px;
}
.el-dialog__body {
  padding: 10px 50px 17px 50px;
}
.el-dialog__title {
  font-weight: 600;
  font-size: 18px;
  color: #242a38;
}
</style>
